import type { BubbleProps } from '@ant-design/x';
import { Bubble } from '@ant-design/x';
import { ChartType, GPTVisLite, Violin, withChartCode } from '@antv/gpt-vis';
import React from 'react';

const markdownContent = `
当然了，以下是为你绘制的一个小提琴图：

\`\`\`vis-chart
{
  "type": "violin",
  "data":[{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.4},{"category":"SepalWidth","value":3.5},{"category":"SepalLength","value":5.1},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.4},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":4.9},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.3},{"category":"SepalWidth","value":3.2},{"category":"SepalLength","value":4.7},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.5},{"category":"SepalWidth","value":3.1},{"category":"SepalLength","value":4.6},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.4},{"category":"SepalWidth","value":3.6},{"category":"SepalLength","value":5},{"category":"PetalWidth","value":0.4},{"category":"PetalLength","value":1.7},{"category":"SepalWidth","value":3.9},{"category":"SepalLength","value":5.4},{"category":"PetalWidth","value":0.3},{"category":"PetalLength","value":1.4},{"category":"SepalWidth","value":3.4},{"category":"SepalLength","value":4.6},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.5},{"category":"SepalWidth","value":3.4},{"category":"SepalLength","value":5},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.4},{"category":"SepalWidth","value":2.9},{"category":"SepalLength","value":4.4},{"category":"PetalWidth","value":0.1},{"category":"PetalLength","value":1.5},{"category":"SepalWidth","value":3.1},{"category":"SepalLength","value":4.9},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.5},{"category":"SepalWidth","value":3.7},{"category":"SepalLength","value":5.4},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.6},{"category":"SepalWidth","value":3.4},{"category":"SepalLength","value":4.8},{"category":"PetalWidth","value":0.1},{"category":"PetalLength","value":1.4},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":4.8},{"category":"PetalWidth","value":0.1},{"category":"PetalLength","value":1.1},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":4.3},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.2},{"category":"SepalWidth","value":4},{"category":"SepalLength","value":5.8},{"category":"PetalWidth","value":0.4},{"category":"PetalLength","value":1.5},{"category":"SepalWidth","value":4.4},{"category":"SepalLength","value":5.7},{"category":"PetalWidth","value":0.4},{"category":"PetalLength","value":1.3},{"category":"SepalWidth","value":3.9},{"category":"SepalLength","value":5.4},{"category":"PetalWidth","value":0.3},{"category":"PetalLength","value":1.4},{"category":"SepalWidth","value":3.5},{"category":"SepalLength","value":5.1},{"category":"PetalWidth","value":0.3},{"category":"PetalLength","value":1.7},{"category":"SepalWidth","value":3.8},{"category":"SepalLength","value":5.7},{"category":"PetalWidth","value":0.3},{"category":"PetalLength","value":1.5},{"category":"SepalWidth","value":3.8},{"category":"SepalLength","value":5.1},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.7},{"category":"SepalWidth","value":3.4},{"category":"SepalLength","value":5.4},{"category":"PetalWidth","value":0.4},{"category":"PetalLength","value":1.5},{"category":"SepalWidth","value":3.7},{"category":"SepalLength","value":5.1},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1},{"category":"SepalWidth","value":3.6},{"category":"SepalLength","value":4.6},{"category":"PetalWidth","value":0.5},{"category":"PetalLength","value":1.7},{"category":"SepalWidth","value":3.3},{"category":"SepalLength","value":5.1},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.9},{"category":"SepalWidth","value":3.4},{"category":"SepalLength","value":4.8},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.6},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":5},{"category":"PetalWidth","value":0.4},{"category":"PetalLength","value":1.6},{"category":"SepalWidth","value":3.4},{"category":"SepalLength","value":5},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.5},{"category":"SepalWidth","value":3.5},{"category":"SepalLength","value":5.2},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.4},{"category":"SepalWidth","value":3.4},{"category":"SepalLength","value":5.2},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.6},{"category":"SepalWidth","value":3.2},{"category":"SepalLength","value":4.7},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.6},{"category":"SepalWidth","value":3.1},{"category":"SepalLength","value":4.8},{"category":"PetalWidth","value":0.4},{"category":"PetalLength","value":1.5},{"category":"SepalWidth","value":3.4},{"category":"SepalLength","value":5.4},{"category":"PetalWidth","value":0.1},{"category":"PetalLength","value":1.5},{"category":"SepalWidth","value":4.1},{"category":"SepalLength","value":5.2},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.4},{"category":"SepalWidth","value":4.2},{"category":"SepalLength","value":5.5},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.5},{"category":"SepalWidth","value":3.1},{"category":"SepalLength","value":4.9},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.2},{"category":"SepalWidth","value":3.2},{"category":"SepalLength","value":5},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.3},{"category":"SepalWidth","value":3.5},{"category":"SepalLength","value":5.5},{"category":"PetalWidth","value":0.1},{"category":"PetalLength","value":1.4},{"category":"SepalWidth","value":3.6},{"category":"SepalLength","value":4.9},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.3},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":4.4},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.5},{"category":"SepalWidth","value":3.4},{"category":"SepalLength","value":5.1},{"category":"PetalWidth","value":0.3},{"category":"PetalLength","value":1.3},{"category":"SepalWidth","value":3.5},{"category":"SepalLength","value":5},{"category":"PetalWidth","value":0.3},{"category":"PetalLength","value":1.3},{"category":"SepalWidth","value":2.3},{"category":"SepalLength","value":4.5},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.3},{"category":"SepalWidth","value":3.2},{"category":"SepalLength","value":4.4},{"category":"PetalWidth","value":0.6},{"category":"PetalLength","value":1.6},{"category":"SepalWidth","value":3.5},{"category":"SepalLength","value":5},{"category":"PetalWidth","value":0.4},{"category":"PetalLength","value":1.9},{"category":"SepalWidth","value":3.8},{"category":"SepalLength","value":5.1},{"category":"PetalWidth","value":0.3},{"category":"PetalLength","value":1.4},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":4.8},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.6},{"category":"SepalWidth","value":3.8},{"category":"SepalLength","value":5.1},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.4},{"category":"SepalWidth","value":3.2},{"category":"SepalLength","value":4.6},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.5},{"category":"SepalWidth","value":3.7},{"category":"SepalLength","value":5.3},{"category":"PetalWidth","value":0.2},{"category":"PetalLength","value":1.4},{"category":"SepalWidth","value":3.3},{"category":"SepalLength","value":5},{"category":"PetalWidth","value":1.4},{"category":"PetalLength","value":4.7},{"category":"SepalWidth","value":3.2},{"category":"SepalLength","value":7},{"category":"PetalWidth","value":1.5},{"category":"PetalLength","value":4.5},{"category":"SepalWidth","value":3.2},{"category":"SepalLength","value":6.4},{"category":"PetalWidth","value":1.5},{"category":"PetalLength","value":4.9},{"category":"SepalWidth","value":3.1},{"category":"SepalLength","value":6.9},{"category":"PetalWidth","value":1.3},{"category":"PetalLength","value":4},{"category":"SepalWidth","value":2.3},{"category":"SepalLength","value":5.5},{"category":"PetalWidth","value":1.5},{"category":"PetalLength","value":4.6},{"category":"SepalWidth","value":2.8},{"category":"SepalLength","value":6.5},{"category":"PetalWidth","value":1.3},{"category":"PetalLength","value":4.5},{"category":"SepalWidth","value":2.8},{"category":"SepalLength","value":5.7},{"category":"PetalWidth","value":1.6},{"category":"PetalLength","value":4.7},{"category":"SepalWidth","value":3.3},{"category":"SepalLength","value":6.3},{"category":"PetalWidth","value":1},{"category":"PetalLength","value":3.3},{"category":"SepalWidth","value":2.4},{"category":"SepalLength","value":4.9},{"category":"PetalWidth","value":1.3},{"category":"PetalLength","value":4.6},{"category":"SepalWidth","value":2.9},{"category":"SepalLength","value":6.6},{"category":"PetalWidth","value":1.4},{"category":"PetalLength","value":3.9},{"category":"SepalWidth","value":2.7},{"category":"SepalLength","value":5.2},{"category":"PetalWidth","value":1},{"category":"PetalLength","value":3.5},{"category":"SepalWidth","value":2},{"category":"SepalLength","value":5},{"category":"PetalWidth","value":1.5},{"category":"PetalLength","value":4.2},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":5.9},{"category":"PetalWidth","value":1},{"category":"PetalLength","value":4},{"category":"SepalWidth","value":2.2},{"category":"SepalLength","value":6},{"category":"PetalWidth","value":1.4},{"category":"PetalLength","value":4.7},{"category":"SepalWidth","value":2.9},{"category":"SepalLength","value":6.1},{"category":"PetalWidth","value":1.3},{"category":"PetalLength","value":3.6},{"category":"SepalWidth","value":2.9},{"category":"SepalLength","value":5.6},{"category":"PetalWidth","value":1.4},{"category":"PetalLength","value":4.4},{"category":"SepalWidth","value":3.1},{"category":"SepalLength","value":6.7},{"category":"PetalWidth","value":1.5},{"category":"PetalLength","value":4.5},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":5.6},{"category":"PetalWidth","value":1},{"category":"PetalLength","value":4.1},{"category":"SepalWidth","value":2.7},{"category":"SepalLength","value":5.8},{"category":"PetalWidth","value":1.5},{"category":"PetalLength","value":4.5},{"category":"SepalWidth","value":2.2},{"category":"SepalLength","value":6.2},{"category":"PetalWidth","value":1.1},{"category":"PetalLength","value":3.9},{"category":"SepalWidth","value":2.5},{"category":"SepalLength","value":5.6},{"category":"PetalWidth","value":1.8},{"category":"PetalLength","value":4.8},{"category":"SepalWidth","value":3.2},{"category":"SepalLength","value":5.9},{"category":"PetalWidth","value":1.3},{"category":"PetalLength","value":4},{"category":"SepalWidth","value":2.8},{"category":"SepalLength","value":6.1},{"category":"PetalWidth","value":1.5},{"category":"PetalLength","value":4.9},{"category":"SepalWidth","value":2.5},{"category":"SepalLength","value":6.3},{"category":"PetalWidth","value":1.2},{"category":"PetalLength","value":4.7},{"category":"SepalWidth","value":2.8},{"category":"SepalLength","value":6.1},{"category":"PetalWidth","value":1.3},{"category":"PetalLength","value":4.3},{"category":"SepalWidth","value":2.9},{"category":"SepalLength","value":6.4},{"category":"PetalWidth","value":1.4},{"category":"PetalLength","value":4.4},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":6.6},{"category":"PetalWidth","value":1.4},{"category":"PetalLength","value":4.8},{"category":"SepalWidth","value":2.8},{"category":"SepalLength","value":6.8},{"category":"PetalWidth","value":1.7},{"category":"PetalLength","value":5},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":6.7},{"category":"PetalWidth","value":1.5},{"category":"PetalLength","value":4.5},{"category":"SepalWidth","value":2.9},{"category":"SepalLength","value":6},{"category":"PetalWidth","value":1},{"category":"PetalLength","value":3.5},{"category":"SepalWidth","value":2.6},{"category":"SepalLength","value":5.7},{"category":"PetalWidth","value":1.1},{"category":"PetalLength","value":3.8},{"category":"SepalWidth","value":2.4},{"category":"SepalLength","value":5.5},{"category":"PetalWidth","value":1},{"category":"PetalLength","value":3.7},{"category":"SepalWidth","value":2.4},{"category":"SepalLength","value":5.5},{"category":"PetalWidth","value":1.2},{"category":"PetalLength","value":3.9},{"category":"SepalWidth","value":2.7},{"category":"SepalLength","value":5.8},{"category":"PetalWidth","value":1.6},{"category":"PetalLength","value":5.1},{"category":"SepalWidth","value":2.7},{"category":"SepalLength","value":6},{"category":"PetalWidth","value":1.5},{"category":"PetalLength","value":4.5},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":5.4},{"category":"PetalWidth","value":1.6},{"category":"PetalLength","value":4.5},{"category":"SepalWidth","value":3.4},{"category":"SepalLength","value":6},{"category":"PetalWidth","value":1.5},{"category":"PetalLength","value":4.7},{"category":"SepalWidth","value":3.1},{"category":"SepalLength","value":6.7},{"category":"PetalWidth","value":1.3},{"category":"PetalLength","value":4.4},{"category":"SepalWidth","value":2.3},{"category":"SepalLength","value":6.3},{"category":"PetalWidth","value":1.3},{"category":"PetalLength","value":4.1},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":5.6},{"category":"PetalWidth","value":1.3},{"category":"PetalLength","value":4},{"category":"SepalWidth","value":2.5},{"category":"SepalLength","value":5.5},{"category":"PetalWidth","value":1.2},{"category":"PetalLength","value":4.4},{"category":"SepalWidth","value":2.6},{"category":"SepalLength","value":5.5},{"category":"PetalWidth","value":1.4},{"category":"PetalLength","value":4.6},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":6.1},{"category":"PetalWidth","value":1.2},{"category":"PetalLength","value":4},{"category":"SepalWidth","value":2.6},{"category":"SepalLength","value":5.8},{"category":"PetalWidth","value":1},{"category":"PetalLength","value":3.3},{"category":"SepalWidth","value":2.3},{"category":"SepalLength","value":5},{"category":"PetalWidth","value":1.3},{"category":"PetalLength","value":4.2},{"category":"SepalWidth","value":2.7},{"category":"SepalLength","value":5.6},{"category":"PetalWidth","value":1.2},{"category":"PetalLength","value":4.2},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":5.7},{"category":"PetalWidth","value":1.3},{"category":"PetalLength","value":4.2},{"category":"SepalWidth","value":2.9},{"category":"SepalLength","value":5.7},{"category":"PetalWidth","value":1.3},{"category":"PetalLength","value":4.3},{"category":"SepalWidth","value":2.9},{"category":"SepalLength","value":6.2},{"category":"PetalWidth","value":1.1},{"category":"PetalLength","value":3},{"category":"SepalWidth","value":2.5},{"category":"SepalLength","value":5.1},{"category":"PetalWidth","value":1.3},{"category":"PetalLength","value":4.1},{"category":"SepalWidth","value":2.8},{"category":"SepalLength","value":5.7},{"category":"PetalWidth","value":2.5},{"category":"PetalLength","value":6},{"category":"SepalWidth","value":3.3},{"category":"SepalLength","value":6.3},{"category":"PetalWidth","value":1.9},{"category":"PetalLength","value":5.1},{"category":"SepalWidth","value":2.7},{"category":"SepalLength","value":5.8},{"category":"PetalWidth","value":2.1},{"category":"PetalLength","value":5.9},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":7.1},{"category":"PetalWidth","value":1.8},{"category":"PetalLength","value":5.6},{"category":"SepalWidth","value":2.9},{"category":"SepalLength","value":6.3},{"category":"PetalWidth","value":2.2},{"category":"PetalLength","value":5.8},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":6.5},{"category":"PetalWidth","value":2.1},{"category":"PetalLength","value":6.6},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":7.6},{"category":"PetalWidth","value":1.7},{"category":"PetalLength","value":4.5},{"category":"SepalWidth","value":2.5},{"category":"SepalLength","value":4.9},{"category":"PetalWidth","value":1.8},{"category":"PetalLength","value":6.3},{"category":"SepalWidth","value":2.9},{"category":"SepalLength","value":7.3},{"category":"PetalWidth","value":1.8},{"category":"PetalLength","value":5.8},{"category":"SepalWidth","value":2.5},{"category":"SepalLength","value":6.7},{"category":"PetalWidth","value":2.5},{"category":"PetalLength","value":6.1},{"category":"SepalWidth","value":3.6},{"category":"SepalLength","value":7.2},{"category":"PetalWidth","value":2},{"category":"PetalLength","value":5.1},{"category":"SepalWidth","value":3.2},{"category":"SepalLength","value":6.5},{"category":"PetalWidth","value":1.9},{"category":"PetalLength","value":5.3},{"category":"SepalWidth","value":2.7},{"category":"SepalLength","value":6.4},{"category":"PetalWidth","value":2.1},{"category":"PetalLength","value":5.5},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":6.8},{"category":"PetalWidth","value":2},{"category":"PetalLength","value":5},{"category":"SepalWidth","value":2.5},{"category":"SepalLength","value":5.7},{"category":"PetalWidth","value":2.4},{"category":"PetalLength","value":5.1},{"category":"SepalWidth","value":2.8},{"category":"SepalLength","value":5.8},{"category":"PetalWidth","value":2.3},{"category":"PetalLength","value":5.3},{"category":"SepalWidth","value":3.2},{"category":"SepalLength","value":6.4},{"category":"PetalWidth","value":1.8},{"category":"PetalLength","value":5.5},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":6.5},{"category":"PetalWidth","value":2.2},{"category":"PetalLength","value":6.7},{"category":"SepalWidth","value":3.8},{"category":"SepalLength","value":7.7},{"category":"PetalWidth","value":2.3},{"category":"PetalLength","value":6.9},{"category":"SepalWidth","value":2.6},{"category":"SepalLength","value":7.7},{"category":"PetalWidth","value":1.5},{"category":"PetalLength","value":5},{"category":"SepalWidth","value":2.2},{"category":"SepalLength","value":6},{"category":"PetalWidth","value":2.3},{"category":"PetalLength","value":5.7},{"category":"SepalWidth","value":3.2},{"category":"SepalLength","value":6.9},{"category":"PetalWidth","value":2},{"category":"PetalLength","value":4.9},{"category":"SepalWidth","value":2.8},{"category":"SepalLength","value":5.6},{"category":"PetalWidth","value":2},{"category":"PetalLength","value":6.7},{"category":"SepalWidth","value":2.8},{"category":"SepalLength","value":7.7},{"category":"PetalWidth","value":1.8},{"category":"PetalLength","value":4.9},{"category":"SepalWidth","value":2.7},{"category":"SepalLength","value":6.3},{"category":"PetalWidth","value":2.1},{"category":"PetalLength","value":5.7},{"category":"SepalWidth","value":3.3},{"category":"SepalLength","value":6.7},{"category":"PetalWidth","value":1.8},{"category":"PetalLength","value":6},{"category":"SepalWidth","value":3.2},{"category":"SepalLength","value":7.2},{"category":"PetalWidth","value":1.8},{"category":"PetalLength","value":4.8},{"category":"SepalWidth","value":2.8},{"category":"SepalLength","value":6.2},{"category":"PetalWidth","value":1.8},{"category":"PetalLength","value":4.9},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":6.1},{"category":"PetalWidth","value":2.1},{"category":"PetalLength","value":5.6},{"category":"SepalWidth","value":2.8},{"category":"SepalLength","value":6.4},{"category":"PetalWidth","value":1.6},{"category":"PetalLength","value":5.8},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":7.2},{"category":"PetalWidth","value":1.9},{"category":"PetalLength","value":6.1},{"category":"SepalWidth","value":2.8},{"category":"SepalLength","value":7.4},{"category":"PetalWidth","value":2},{"category":"PetalLength","value":6.4},{"category":"SepalWidth","value":3.8},{"category":"SepalLength","value":7.9},{"category":"PetalWidth","value":2.2},{"category":"PetalLength","value":5.6},{"category":"SepalWidth","value":2.8},{"category":"SepalLength","value":6.4},{"category":"PetalWidth","value":1.5},{"category":"PetalLength","value":5.1},{"category":"SepalWidth","value":2.8},{"category":"SepalLength","value":6.3},{"category":"PetalWidth","value":1.4},{"category":"PetalLength","value":5.6},{"category":"SepalWidth","value":2.6},{"category":"SepalLength","value":6.1},{"category":"PetalWidth","value":2.3},{"category":"PetalLength","value":6.1},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":7.7},{"category":"PetalWidth","value":2.4},{"category":"PetalLength","value":5.6},{"category":"SepalWidth","value":3.4},{"category":"SepalLength","value":6.3},{"category":"PetalWidth","value":1.8},{"category":"PetalLength","value":5.5},{"category":"SepalWidth","value":3.1},{"category":"SepalLength","value":6.4},{"category":"PetalWidth","value":1.8},{"category":"PetalLength","value":4.8},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":6},{"category":"PetalWidth","value":2.1},{"category":"PetalLength","value":5.4},{"category":"SepalWidth","value":3.1},{"category":"SepalLength","value":6.9},{"category":"PetalWidth","value":2.4},{"category":"PetalLength","value":5.6},{"category":"SepalWidth","value":3.1},{"category":"SepalLength","value":6.7},{"category":"PetalWidth","value":2.3},{"category":"PetalLength","value":5.1},{"category":"SepalWidth","value":3.1},{"category":"SepalLength","value":6.9},{"category":"PetalWidth","value":1.9},{"category":"PetalLength","value":5.1},{"category":"SepalWidth","value":2.7},{"category":"SepalLength","value":5.8},{"category":"PetalWidth","value":2.3},{"category":"PetalLength","value":5.9},{"category":"SepalWidth","value":3.2},{"category":"SepalLength","value":6.8},{"category":"PetalWidth","value":2.5},{"category":"PetalLength","value":5.7},{"category":"SepalWidth","value":3.3},{"category":"SepalLength","value":6.7},{"category":"PetalWidth","value":2.3},{"category":"PetalLength","value":5.2},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":6.7},{"category":"PetalWidth","value":1.9},{"category":"PetalLength","value":5},{"category":"SepalWidth","value":2.5},{"category":"SepalLength","value":6.3},{"category":"PetalWidth","value":2},{"category":"PetalLength","value":5.2},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":6.5},{"category":"PetalWidth","value":2.3},{"category":"PetalLength","value":5.4},{"category":"SepalWidth","value":3.4},{"category":"SepalLength","value":6.2},{"category":"PetalWidth","value":1.8},{"category":"PetalLength","value":5.1},{"category":"SepalWidth","value":3},{"category":"SepalLength","value":5.9}]
}
\`\`\`
`;

const bgStyle = {
  display: 'grid',
  gridGap: '20px 0',
  padding: 20,
  background: '#f7f7f7',
  borderRadius: 8,
  overflow: 'auto',
};

const CodeComponent = withChartCode({
  components: { [ChartType.Violin]: Violin },
  style: { width: 350 },
});

const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
  <GPTVisLite components={{ code: CodeComponent }}>{content}</GPTVisLite>
);

export default () => (
  <div style={bgStyle}>
    <Bubble
      placement="end"
      content="帮我生成鸢尾花花萼长度、花萼宽度、花瓣长度、花瓣宽度的小提琴图"
      avatar={{
        src: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2Q5LRJ3LFPUAAAAAAAAAAAAADmJ7AQ/fmt.webp',
      }}
      styles={{ content: { background: '#ebebeb' } }}
    />
    <Bubble
      content={markdownContent}
      messageRender={RenderMarkdown}
      avatar={{
        src: 'https://mdn.alipayobjects.com/huamei_je4oko/afts/img/A*6LRBT7rjOkQAAAAAAAAAAAAADsZ-AQ/original',
      }}
      variant="shadow"
      styles={{ content: { background: '#fff' } }}
    />
  </div>
);
